<template>
    <div class="box">

        <!-- 头部 -->
        <div class="top" @click="onClickLeft">
            <span>
                <van-icon name="arrow-left" />
                返回
            </span>
            <h3>关于我们</h3>
        </div>

        <!-- 图标 -->
        <div class="banner">
            <img src="../../public/img/tb.png" style="background:none" alt="">
            <h3>晓述APP</h3>
            <p>当前版本 v8.7.95</p>
        </div>

        <!-- 关于 -->
        <div class="wz">
            <van-cell title="新版更新" is-link value="检查更新" style="background:none;color:white;" />
            <van-cell title="功能介绍" is-link style="background:none;color:white;" />
            <van-cell title="评个分吧" is-link style="background:none;color:white;" />
            <van-cell title="推荐好友" @click="showShare = true" is-link style="background:none;color:white;" />
            <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" />
            <van-cell title="隐私政策" is-link style="background:none;color:white;" />
        </div>

        <!-- 底部 -->
        <div class="footer">
            <p>Copysfsgd©2004-2020</p>
            <p>晓述TT.com 版权所有</p>
        </div>

    </div>
</template>

<script>
import { NavBar } from 'vant';
import { ShareSheet } from 'vant';
export default {
    data() {
        return {
            showShare: false,
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
        }
    },
    components: {
        [NavBar.name]: NavBar,
        [ShareSheet.name]: ShareSheet
    },
    methods: {
        onClickLeft() {
            setTimeout(v => {
                this.$router.push('geren')
                console.log(v)
            }, 100);
        }
    },
}
</script>

<style scoped>
.van-cell__value {
    color: white;
}

.van-icon-arrow:before {
    color: white;
}

.box {
    width: 100%;
    height: 101vh;
    background-image: url(../../public/img/bj5.jpg);
    background-size: cover;
}

/* 头部 */
.top {
    width: 100%;
    height: 55px;
    padding-top: 20px;
    margin-bottom: 30px;
}

.top span {
    float: left;
    line-height: 55px;
    margin-left: 10px;
    margin-top: 2px;
    color: white;
}

.top h3 {
    text-align: center;
    color: white;
    line-height: 55px;
    margin-top: 0;
    margin-right: 60px;
    margin-bottom: 0;
}

/* 图标 */
.box .banner {
    width: 100%;
    height: 250px;
    background-color: none;
}

.banner img {
    width: 110px;
    position: relative;
    top: 10%;
    left: 35%;
}

.banner h3 {
    color: white;
    margin-top: 40px;
    text-align: center;
    margin-bottom: 0;
}

.banner p {
    color: white;
    text-align: center;
}

/* 关于 */
.box .wz {
    margin-bottom: 155px;
}

/* 底部 */
.footer p {
    margin: 0;
    color: rgb(206, 178, 178);
    text-align: center;
}
</style>